<template>
<div>
    <el-button type="primary" icon="el-icon-edit" @click="saveUser">添加用户</el-button>

    <el-input v-model="search" size="mini" placeholder="输入电话搜索"/>

    <el-table v-loading="loading" :data="tableData.filter(data => !search || data.phone.toLowerCase().includes(search.toLowerCase()))" border style="width: 100%">

    <el-table-column prop="id" label = "id" width = "300" align="center"> </el-table-column>

    <el-table-column prop="username" label="姓名" width="300" align="center"> </el-table-column>

    <el-table-column prop="phone" label="电话" width="300" align="center"> </el-table-column>

    <el-table-column prop="role.rolename" label="角色" width="200" align="center"> </el-table-column>

    <el-table-column prop="right" label="操作" width="200" align="center">
    <template slot-scope="scope">
        <el-button type="info" size="mini" @click="editUser(scope.row)">编辑</el-button>
        <el-button @click.native.prevent="deleteUser(scope.row.phone, scope.$index, tableData)" type="danger" size="mini"> <i class="el-icon-delete-solid"></i> </el-button>
    </template>
</el-table-column>

</el-table>

<el-dialog
 :title="showTitle"
 :visible.sync="showUser"
 width="40%"
 :before-close="handleClose">
 <el-form :model="userForm" ref="forms" :rules="rules">
     <el-form-item label="姓名" prop="username" :label-width="formLabelWidth">
        <el-input v-model="userForm.username"  autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="电话" prop="phone"  :label-width="formLabelwidth">
        <el-input v-model="userForm.phone" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="密码" prop="password"  :label-width="formLabelwidth">
        <el-input v-model="userForm.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="角色" prop="roleid" :label-width="formLabelwidth">

    <el-select v-model="userForm.roleid" placeholder="请选择">

<el-option v-for="item in roleOptions" :key="item.id" :label="item.rolename" :value="item.id"> </el-option>

    </el-select>

    </el-form-item>

</el-form>

<span slot="footer" class="dialog-footer">
    <el-button @click="showUser=false">取 消</el-button>
    <el-button type="primary" @click="confirmUser" :loading='editLoading'>确 定</el-button>
    </span>
    
    </el-dialog>
</div>
</template>

<script>
import {userManage,deleteUser,saveUser,updateUser} from '../services/user'

export default {
    data() {
        return {
            tableData: [],
            loading: true,
            formLabelWidth: '100px',
            showUser: false,
            editLoading: false,
            showTitle:'',
            confirmType: '',
            userForm:{
                phone:'',
                username:'',
                rolename:'',
                password:''
            },
            rules:{
                username:[{required:true,message:'姓名不能为空',tigger:'blur'}],
                userphone:[{required:true,message:'电话不能为空',tigger:'blur'}],
                rolename:[{required:true,message:'角色不能为空',tigger:'blur'}],
                password:[{required:true,message:'密码不能为空',tigger:'blur'}],
            },
            roleOptions:[],
            updateId:'',
            search:''
        }
    },
    methods: {
        deleteUser(phone,index,rows){
            this.loadign=true;
            deleteUser({phone:phone}).then(res=>{
                if(res.success){
                    this.$message.info(res.err.msg);
                    rows.splice(index,1);
                    this.loading=false;
                }else{
                    this.$message.error(res.err.msg);
                }
            })
        },
        handleClose(done) {
            this.$confirm('确认关闭?')
            .then(_=>{
                done();
            })
            .catch(_=>{});
        },
        editUser(userItem){
            userManage().then(res=>{
                this.roleOptions = res.data.roles})  
            this.showTitle='编辑角色';
            this.showUser = true;
            this.updateId = userItem.id
            this.userForm.phone = userItem.phone
            this.userForm.username = userItem.username
            this.userForm.rolename = userItem.rolename
            this.userForm.password = userItem.password
            this.confirmType = 2
        },
        saveUser(){
            userManage().then(res=>{
                this.roleOptions = res.data.roles})
            this.showTitle='新增角色';
            this.showUser= true; 
            this.userForm.phone='' 
            this.userForm.username=''
            this.userForm.rolename=''
            this.userForm.password=''
            this.confirmType =1
        },
        confirmUser(){
            this.$refs['forms'].validate((valid)=>{
                if(valid){
                    this.editLoading = true;
                    if(this.confirmType ==1){
                        saveUser(this.userForm).then(res=>{
                            this.editLoading = false;
                            this.showUser = false;
                            if(res.success){
                                this.loading = true;
                                this.$message.info(res.err.msg);
                                userManage().then(res=>{
                                    this.tableData = res.data.users;
                                    this.loading = false;
                                })
                            }else{
                                this.$message.error(res.err.msg);
                            }
                        })
                    }
                    else if(this.confirmType ==2){
                        this.userForm.id =this.updateId;
                        updateUser(this.userForm).then(res=>{
                            this.editLoading = false;
                            this.showUser = false;
                            if(res.success){
                                this.loading = true;
                                this.$message.info(res.err.msg);
                                this.$router.push({
                                    name:'Mine'
                                })
                            }else{
                                this.$message.error(res.err.msg);
                            }
                        })
                    }else{
                        this.$message.error("提交失败");
                    }
                }
            })
        }
    },
    mounted:function(){
        console.log("获取用户列表")
        userManage().then(res=>{
            this.tableData = res.data.users;
            this.loading = false;
        })
    }
}
</script>
